<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/cart.css">
    <script src="js/jquery-3.5.1.min.js"></script>
    
</head>

<body>
    <!-- 导航 -->
    <nav>
        <div class="w">
            <div class="logo"> <img src="images/LOGO.png" alt=""> <span>雅轩阁</span> </div>
            <ul>
                <li><a href="home.html">首页</a></li>
                <li><a href="read.html">关于读书</a></li>
                <li><a href="shop.html">图书商城</a></li>
                <li><a href="news.html">图书动态</a></li>
                <li><a href="myself.html">自我介绍</a></li>
                <li><a href="camera.html">我的相册</a></li>
                <li class="right"><a class="logins" href="index.html">登录</a></li>
            </ul>
        </div>
    </nav>
    <div class="w car_content">
        <div class="title">
            <div class="col-1">
                <input type="checkbox" class="selectAll">全选
            </div>
            <div>商品图片</div>
            <div>商品名称</div>
            <div>单价</div>
            <div>数量</div>
            <div>总价</div>
            <div>操作</div>
        </div>
        <div class="goodsItem">
            <div>
                <input type="checkbox" class="selectItem">
            </div>
            <div class="thumb">
                <img src="images/01.jpg">
            </div>
            <div>
                《挪威的森林》
            </div>
            <div class="price"> 80 </div>
            <div  class="nums">
                <a href="#" class="sub">-</a><input type="text" class="num" value="1"><a href="#" class="add">+</a>
            </div>
            <div class="total"> 80 </div>
            <div>
                <a href="#" class="deleteItem">删除</a>
            </div>
        </div>
        <div class="goodsItem">
            <div>
                <input type="checkbox" class="selectItem">
            </div>
            <div  class="thumb">
                <img src="images/02.jpg">
            </div>
            <div>
                《小王子》
            </div>
            <div class="price">
                30
            </div>
            <div  class="nums">
                <a href="#" class="sub">-</a><input type="text" class="num" value="1"><a href="#" class="add">+</a>
            </div>
            <div class="total">
                30
            </div>
            <div>
                <a href="#" class="deleteItem">删除</a>
            </div>
        </div>
        <div class="goodsItem">
            <div>
                <input type="checkbox" class="selectItem">
            </div>
            <div class="thumb">
                <img src="images/01.jpg">
            </div>
            <div>
                《挪威的森林》
            </div>
            <div class="price"> 80 </div>
            <div class="nums">
                <a href="#" class="sub">-</a><input type="text" class="num" value="1"><a href="#" class="add">+</a>
            </div>
            <div class="total"> 80 </div>
            <div>
                <a href="#" class="deleteItem">删除</a>
            </div>
        </div>
        <div class="alltotalDiv">
            <div>
                已经选择(<span id="count">0</span>)件商品，总价:
            </div>
            <p>总金额：￥<span id="allTotal">0.00</span></p>
            <a class="toPay">去结算</a>
        </div>
    </div>
    <script>
        $(function () {
            $(".add").click(function () {
                //修改数量输入框的内容
                var thisNum = $(this).siblings(".num");//thisNum对应<input type="text" class="num" value="1">
                var num = parseInt(thisNum.val());//num表示当前商品修改前的数量
                thisNum.val(num + 1);
                //获取商品的单价和修改前的总价
                var thisPrice = $(this).parent().siblings(".price");//thisPrice对应<div class="col-1 price">30</div>
                var price = parseFloat(thisPrice.text());//price表示当前商品的单价
                var thisTotal = $(this).parent().siblings(".total");//thisTotal对应 <div class="col-1 total"> 30</div>
                var total = parseFloat(thisTotal.text());//total表示当前商品修改前的总价
                //修改当前商品的总价
                thisTotal.text(total + price);
                var allTotal = parseFloat($("#allTotal").text());//allTotal表示修改前的所有商品的总价
                $("#allTotal").text(allTotal + price);//修改所有商品的总价
                //修改选中的商品总数
                var count = parseFloat($("#count").text());//count表示修改前的商品总数量
                $("#count").text(count + 1);//修改选中的商品总数
            });

            $(".sub").click(function () {
                //修改数量输入框的内容
                var thisNum = $(this).siblings(".num");//thisNum对应<input type="text" class="num" value="1">
                var num = parseInt(thisNum.val());//num表示当前商品修改前的数量
                if (num >= 1) {
                    thisNum.val(num - 1);
                    //获取商品的单价和修改前的总价
                    var thisPrice = $(this).parent().siblings(".price");//thisPrice对应<div class="col-1 price">30</div>
                    var price = parseFloat(thisPrice.text());//price表示当前商品的单价
                    var thisTotal = $(this).parent().siblings(".total");//thisTotal对应 <div class="col-1 total"> 30</div>
                    var total = parseFloat(thisTotal.text());//total表示当前商品修改前的总价
                    //修改当前商品的总价
                    thisTotal.text(total - price);
                    var allTotal = parseFloat($("#allTotal").text());//allTotal表示修改前的所有商品的总价
                    $("#allTotal").text(allTotal - price);//修改所有商品的总价
                    //修改选中的商品总数
                    var count = parseFloat($("#count").text());//count表示修改前的商品总数量
                    $("#count").text(count - 1);//修改选中的商品总数
                }
            });
            $(".deleteItem").click(function () {
                //修改删除后的所有商品总价格
                var allTotal = parseFloat($("#allTotal").text());//获取删除前的所有商品的总价
                var total = ($(this).parent().siblings(".total").text());//获取当前待删除的商品总价
                $("#allTotal").text(allTotal - total);//修改删除后的所有商品总价格
                //修改删除后的所有商品总数量
                var count = parseInt($("#count").text());//获取删除的所有商品总数量
                var num = parseInt($(this).parent().parent().find(".num").val());//获取待删除商品的数量
                $("#count").text(count - num);//修改删除后的所有商品总价格
                $(this).parent().parent().next().remove();//删除水平线
                $(this).parent().parent().remove();//删除商品所在行
            });

            var count = $("#count").text();//获取全选时所有商品的总数量
            var allTotala = $("#allTotala").text();//获取全选时所有商品总价格
            $(".selectAll").click(function () {
                var isSelected = $(this).prop("checked");//获取全选复选框的选中属性
                $(".selectItem").prop("checked", isSelected);
                if (isSelected) {
                    var m = 0
                    $(".total").each(function(){
                        m+=parseFloat($(this).text());
                    })
                    $("#allTotal").text(m.toFixed(2));
                    $("#count").text($(".total").length);

                } else {
                    $("#count").text(0);
                    $("#allTotal").text(0.00);
                }
            });
            // 为单个复选框绑定单击事件
            $(".selectItem").click(function(){
                var chk = $(".selectItem:checked").length == $(".selectItem").length ?true :false;
                $(".selectAll").prop("checked",chk)
                $("#count").text($(".selectItem:checked").length);
                // 计算总金额
                m=0
                $(".goodsItem").each(function(){
                   if( $(this).find(".selectItem").prop("checked")){
                    m+=parseFloat($(this).find(".total").text())
                   }
                })
                $("#allTotal").text(m.toFixed(2));
            })
        });
    </script>
    <!-- 网页底部 -->
    <footer>
        <div class="w">
            <p><img src="images/LOGO.png" alt=""></p>
            <p>雅轩阁 版权所有 </p>
            <p>Copyright © 2023 Phoenix New Media Limited All Rights Reserved</p>
            <p>YAXUANGE</p>
            <p></p>
        </div>

    </footer>
</body>

</html>